<template>
  <div class="parent-component">
    <h1>父组件</h1>

    <!-- 输入框设置初始计数值 -->
    <div class="input-section">
      <input v-model="initialValue" type="number" placeholder="设置初始值..." />
      <button @click="resetCounter">重置计数器</button>
    </div>

    <!-- 子组件展示计数器 -->
    <CounterComponent ref="counterRef" :initial="initialValue">
      <!-- 插槽内容 -->
      <template #default>
        <p>这是子组件中的提示信息</p>
      </template>
    </CounterComponent>
  </div>
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from 'vue'
import CounterComponent from './SonsonDemo/CounterComponent.vue'
const counterRef = useTemplateRef('counterRef')
const initialValue = ref<number>(0)

const resetCounter = () => {
  initialValue.value = 0
  counterRef.value?.reset()
}
</script>

<style lang="scss" scoped>
.parent-component {
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 8px;
  width: 400px;
  margin: 0 auto;
}

.input-section {
  margin-bottom: 20px;
}

.input-section input {
  padding: 8px;
  width: 70%;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-section button {
  padding: 8px 16px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
}

.input-section button:hover {
  background-color: #0056b3;
}
</style>
